<template>
	<div>
		<div
			class="edgeApp"
			v-show="props.config?.showFlag"
			:style="propHoverStyle"
			@mouseenter="props.config.showFlag = true"
			@mouseleave="props.config.showFlag = false"
		>
			<a-space direction="horizontal">
				<a-tooltip title="删除" v-if="iconConfig.showRemoveIcon">
					<Icon @click="removeEdge">
						<template #component>
							<svg
								t="1726448915671"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="7021"
								width="1.5em"
								height="1.5em"
							>
								<path
									d="M366.1 200.7h291.7c16.6 0 30-13.4 30-30s-13.4-30-30-30H366.1c-16.6 0-30 13.4-30 30s13.5 30 30 30zM366.1 755.3c16.6 0 30-13.4 30-30V366.7c0-16.6-13.4-30-30-30s-30 13.4-30 30v358.6c0 16.6 13.5 30 30 30zM512 754.7c16.6 0 30-13.4 30-30V366.1c0-16.6-13.4-30-30-30s-30 13.4-30 30v358.6c0 16.6 13.4 30 30 30zM657.8 755.3c16.6 0 30-13.4 30-30V366.7c0-16.6-13.4-30-30-30s-30 13.4-30 30v358.6c0 16.6 13.5 30 30 30z"
									fill="#666666"
									p-id="7022"
								></path>
								<path
									d="M832.1 227.5H192c-16.6 0-30 13.4-30 30s13.4 30 30 30h55.3v505.8c0 49.6 40.4 90 90 90h349.5c49.6 0 90-40.4 90-90V287.5h55.3c16.6 0 30-13.4 30-30s-13.5-30-30-30zM716.7 793.3c0 16.5-13.5 30-30 30H337.3c-16.5 0-30-13.5-30-30V287.5h409.5v505.8z"
									fill="#666666"
									p-id="7023"
								></path>
							</svg>
						</template>
					</Icon>
				</a-tooltip>

				<a-tooltip :title="props.config.properties?.disabled ? '启用' : '停用'" v-show="iconConfig.showStatusIcon">
					<Icon @click="disableEdge(!props.config.properties.disabled)">
						<template #component>
							<svg
								t="1726449016554"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="8022"
								width="1.5em"
								height="1.5em"
							>
								<path
									d="M523.3 546m-450 0a450 450 0 1 0 900 0 450 450 0 1 0-900 0Z"
									fill="#E0DDFF"
									opacity=".6"
									p-id="8023"
								></path>
								<path
									d="M584.9 545.9l135.6-135.4c17-17 17-44.5 0-61.5s-44.6-17-61.6 0L523.3 484.4 387.7 349c-17-17-44.6-17-61.6 0s-17 44.5 0 61.5l135.6 135.3-135.6 135.4c-17 17-17 44.5 0 61.5 8.1 8.2 19.3 12.7 30.8 12.7 11.6 0 22.6-4.6 30.8-12.7l135.7-135.3L659 742.7c8.1 8.2 19.3 12.7 30.8 12.7 11.6 0 22.6-4.6 30.8-12.7 17-17 17-44.5 0-61.5L584.9 545.9z m0 0"
									fill="#7B1FA2"
									p-id="8024"
								></path>
							</svg>
						</template>
					</Icon>
				</a-tooltip>
			</a-space>
		</div>
	</div>
</template>

<script setup>
import Icon from '@ant-design/icons-vue'

const props = defineProps(['config', 'lf'])

const iconConfig = ref({
	showRemoveIcon: false,
	showStatusIcon: false
})

const propHoverStyle = ref({})

const removeEdge = () => {
	props.lf.removeEdge(props.config.id)
	props.config.showFlag = false
}

const disableEdge = (bool) => {
	if (bool) {
		props.lf.disableEdge(props.config.id)
	} else {
		props.lf.enableEdge(props.config.id)
	}

	// props.config.showFlag = false
}

const showManyIcon = () => {
	const ls = props.lf.getEdgeModelById(props.config.id)
	if (!ls) {
		return
	}
	isShowRemoveIcon(ls)
	isShowStatusIcon(ls)
}

const isShowRemoveIcon = (ls) => {
	iconConfig.value.showRemoveIcon = ls.showRemoveIcon()
}

const isShowStatusIcon = (ls) => {
	iconConfig.value.showStatusIcon = ls.showStatusIcon()
}

watch(
	() => props.config,
	(newVal, oldVal) => {
		if (props.config.rect) {
			//顶部工具栏
			// if (props.config.rect.height > props.config.rect.width) {
			// 	propHoverStyle.value.top = props.config.rect.top + props.config.rect.height / 4 + 'px'
			// 	propHoverStyle.value.left = props.config.rect.left - props.config.rect.width + 'px'
			// }
			// else {
			propHoverStyle.value.top = props.config.rect.top + 'px'
			propHoverStyle.value.left = props.config.rect.left - 8 + 'px'
			//		}

			// propHoverStyle.value.width = props.config.rect.width + 'px'
			// propHoverStyle.value.height = props.config.rect.height + 'px'
		}
		//删除图标
		showManyIcon()
	}
)
</script>

<style scoped lang="less">
.edgeApp {
	position: fixed;
}
</style>
